<template>
  <div class="flex h-screen bg-gray-50 overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-lg border-r border-gray-200">
      <div class="p-4 border-b border-gray-200">
        <h1 class="text-xl font-bold text-gray-800">组件库</h1>
      </div>
      <div class="p-4 space-y-2">
        <div
          v-for="component in components"
          :key="component.id"
          class="p-3 bg-gray-100 rounded cursor-move hover:bg-gray-200 transition-colors"
          @dragstart="startDrag($event, component)"
          draggable="true"
        >
          {{ component.name }}
        </div>
      </div>
    </aside>

    <!-- 主编辑区 -->
    <main class="flex-1 overflow-auto p-4">
      <div
        id="editor"
        class="min-h-[800px] bg-white shadow-md p-4 border-2 border-dashed border-gray-300"
        @dragover="allowDrop"
        @drop="handleDrop"
      >
        <!-- <div
          v-if="!currentComponent"
          class="flex items-center justify-center h-[600px] text-gray-400"
        >
          <p>拖拽左侧组件到此处开始设计</p>
        </div>
        <Component
          v-else
          :is="currentComponent.type"
          :key="currentComponent.id"
          :props="currentComponent.props"
          class="mb-4"
          @click="selectComponent(currentComponent)"
        /> -->
        <div v-if="currentComponent">
          <component
            :is="ElInput"
            :key="currentComponent.id"
            :props="currentComponent.props"
            class="mb-4"
          />
        </div>
      </div>
    </main>

    <!-- 属性面板 -->
    <aside
      v-if="selectedComponent"
      class="w-72 bg-white shadow-lg border-l border-gray-200 overflow-y-auto"
    >
      <div class="p-4 border-b border-gray-200">
        <h1 class="text-xl font-bold text-gray-800">属性配置</h1>
      </div>
      <div class="p-4 space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">组件名称</label>
          <input
            v-model="selectedComponent.name"
            type="text"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          />
        </div>
        <div v-if="selectedComponent.type === 'el-input'">
          <label class="block text-sm font-medium text-gray-700 mb-1">占位文本</label>
          <input
            v-model="selectedComponent.props.placeholder"
            type="text"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          />
        </div>
        <div v-if="selectedComponent.type === 'el-button'">
          <label class="block text-sm font-medium text-gray-700 mb-1">按钮文本</label>
          <input
            v-model="selectedComponent.props.content"
            type="text"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          />
        </div>
        <div v-if="selectedComponent.type === 'el-button'">
          <label class="block text-sm font-medium text-gray-700 mb-1">按钮类型</label>
          <select
            v-model="selectedComponent.props.type"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          >
            <option value="primary">Primary</option>
            <option value="success">Success</option>
            <option value="warning">Warning</option>
            <option value="danger">Danger</option>
            <option value="info">Info</option>
          </select>
        </div>
        <button
          @click="saveComponent"
          class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
        >
          保存配置
        </button>
      </div>
    </aside>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { ElInput, ElButton, ElSelect, ElOption, ElCheckbox } from 'element-plus'

// 可用组件列表
const components = [
  { id: 'input', name: '输入框', type: 'el-input', props: { placeholder: '请输入' } },
  {
    id: 'button',
    name: '按钮',
    type: 'el-button',
    props: { content: '点击按钮', type: 'primary' },
  },
  { id: 'select', name: '下拉选择', type: 'el-select', props: { placeholder: '请选择' } },
  { id: 'checkbox', name: '复选框', type: 'el-checkbox', props: { label: '选项' } },
]

// 当前设计器中的组件
const currentComponent = ref<any>(null)
// 选中的组件
const selectedComponent = ref<any>(null)

// 开始拖拽
const startDrag = (e: any, component: any) => {
  const data = JSON.stringify({ ...component, id: Date.now() })
  e.dataTransfer.setData('text/plain', data)
}

// 允许放置
const allowDrop = (e: Event) => {
  e.preventDefault()
}

// 处理放置
const handleDrop = (e: any) => {
  e.preventDefault()
  const data = JSON.parse(e.dataTransfer.getData('text/plain'))
  currentComponent.value = data
  selectedComponent.value = { ...data }
}

// 选择组件
const selectComponent = (component: DragComponent) => {
  selectedComponent.value = { ...component }
}

// 保存组件配置
const saveComponent = () => {
  if (selectedComponent.value) {
    currentComponent.value = { ...selectedComponent.value }
  }
}

// 导出代码
const exportCode = () => {
  // 这里实现代码导出逻辑
  console.log('导出代码:', currentComponent.value)
  alert('代码导出功能将在未来版本中实现')
}
</script>

<style scoped>
.primary-500 {
  color: #409eff;
}
</style>
